<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>demo-地点选择</title>
    <link rel="stylesheet" href="../css/font-awesome.css">
    <link rel="stylesheet" href="../css/layout.css">
    <link rel="stylesheet" href="../css/地点选择.css">
    <link rel="stylesheet" href="../css/map.css">
    <script src="../js/time.js"></script>
    <script src="../js/map.js"></script>
    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main.css"/>
    <script type="text/javascript"
            src="https://webapi.amap.com/maps?v=1.4.2&key=402a7f760c3159db04546b96b1f2576a"></script>
</head>
<body>
<header>
    <div id = "header_box">
        <h1 style="display: inline-block">慢行交通全感知与异常预警系统</h1>

        <div id = "message_box" style="display: inline-block">
            <label for="message"><i class="fa fa-envelope" aria-hidden="true"></i></label>
            <a href="#" id = "message">消息</a>
        </div>

        <div id = "user_box" style="display: inline-block">
            <label for="user"></label>
            <i class="fa fa-user-circle-o" aria-hidden="true"></i>
            <a href="#" id = "user">账户</a>
        </div>
    </div>
</header>
<aside>
    <div id = "aside_head">
        <i class="fa fa-wifi fa-5x" aria-hidden="true"></i>
    </div>
    <div id = "aside_body">

        <a href="../pages/地点选择.html" class = "option" style="display: block"><i class="fa fa-map-marker fa-fw" aria-hidden="true"></i>&nbsp;地点选择</a>

        <a href="../pages/断面流量.html" class = "option" style="display: block"><i class="fa fa-area-chart fa-fw"  aria-hidden="true"></i>&nbsp;断面流量</a>

        <a href="../pages/行人定位.html" class = "option" style="display: block"><i class="fa fa-street-view fa-fw" aria-hidden="true"></i>&nbsp;行人定位</a>

        <a href="../pages/行人速度.html" class = "option" style="display: block"><i class="fa fa-clock-o fa-fw" aria-hidden="true"></i>&nbsp;行人速度</a>

        <a href="../pages/事故监控.html" class = "option" style="display: block"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>&nbsp;事故监控</a>

    </div>
</aside>

<section id="main">
    <div id="con">
        <div class = "g_title" style="width: 300px">
            <i class="fa fa-map-marker fa-fw" aria-hidden="true" style = "color: grey;"></i>
            <div id="tip" style="position: absolute; left: 8%; top: -10px;">
                <input type="text" id="keyword" name="keyword" value="请输入关键字：(选定后搜索)" onfocus='this.value=""'/>
            </div>
        </div>
        <div id = "datetime"></div>

        <div class = "g_con" id = "map_con" style="height: 400px; width: 700px; left: 10px; top: 70px;"></div>
        <script src="../js/map.js"></script>

        <div class = "g_con" style="height: 400px; width: 300px; left: 760px; top: 70px;">
            <dl>
                <dt id = "item_title"><i class="fa fa-map-marker fa-fw" aria-hidden="true" style = "color: grey;"></i>海达南路与学林街路口</dt>
                <dd class = "item">西向东 56%(+13%) <i style="background-color: red;"></i></dd>
                <dd class = "item">东向西 43%(-11%) <i style="background-color: #00ff99;"></i></dd>
                <dd class = "item">南向北 66%(+8%) <i style="background-color: #00ff99;"></i></dd>
                <dd class = "item">北向南 56%(-15%) <i style="background-color: yellow"></i></dd>
            </dl>
        </div>
    </div>
</section>




    <script type="text/javascript" src="https://webapi.amap.com/demos/js/liteToolbar.js"></script>
</body>
</html>